<template>
  <div>
    <Row>
      <i-col span="24" class="operation_item y_query_right">
        <Select placeholder="排序方式" v-model="sort" class="y_condition" clearable style="text-align: left;width: 120px;">
          <Option value="create_time desc">时间降序</Option>
          <Option value="create_time asc">时间升序</Option>
          <Option value="spam_score desc">评分降序</Option>
          <Option value="spam_score asc" >评分升序</Option>
        </Select>
        <Input v-model.trim="tParam.subject" placeholder="标题关键词" clearable class="y_condition"></Input>
        <Input v-model.trim="tParam.userNo" placeholder="用户编号或发件人邮箱" style="min-width: 170px;" clearable class="y_condition"></Input>
        <DatePicker placeholder="开始时间" type="datetime" v-model="tParam.startTime" format="yyyy-MM-dd HH:mm"
                    style="min-width: 150px" class="y_condition"></DatePicker>
        -
        <DatePicker placeholder="截止时间" type="datetime" v-model="tParam.endTime" format="yyyy-MM-dd HH:mm"
                    class="y_condition"></DatePicker>
        <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>
        <Button type="error" icon="ios-trash-outline" class="y_condition" @click="deleteAction()"
                :disabled="messageSelected.length===0" v-has=tRole.EMAIL_4_101>删除
        </Button>
      </i-col>
    </Row>


    <br/>
    <List>
      <ListItem style="display: flex;flex-direction: column;align-items: flex-start;margin-left: 1rem;">
        <Checkbox v-model="isCheckedAllMessage" @on-change="handleCheckAll">全选</Checkbox>
      </ListItem>
      <CheckboxGroup v-model="messageSelected" @on-change="checkChange">
        <list-item class="list_item" v-for="(item,index) in emailData">
          <div style="width:100%;padding: 0 0.5rem;">
            <Row style="cursor: pointer">
              <i-col span="1">
                <Checkbox :label="item.id" :value="index">{{ check }}</Checkbox>
              </i-col>
              <i-col span="23" style="text-align: left;" @click.native="showEmail(index)">
                <p style="font-weight: 500;font-size: 0.8rem">{{ item.subject }}</p>
                <p v-if="item.text!=null" class="base_key" style="margin-top: 0.3rem">{{ item.text.substring(0, 50) }}</p>
              </i-col>
            </Row>
            <row  justify="end">
              <i-col @click.stop>
                <Tag  type="border" color="purple" style="margin-right: 1rem">发件人：{{ item.virtualName }}</Tag>
                <Tag type="border" color="red" style="margin-right: 1rem;">评分：{{ item.spamScore}}</Tag>
                <KeyValueView title="时间">{{ $tiyBJTime(new Date(item.createTime).getTime()) }}</KeyValueView>
              </i-col>

            </row>

          </div>
        </list-item>
      </CheckboxGroup>
    </List>

    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[20,40,60,100]"
            show-sizer show-elevator/>
    </div>

    <!--删除确认弹出框-->
    <Modal
      v-model="status.modalDelete.isShow"
      title="确认删除"
      :loading="status.modalDelete.isLoading"
      @on-ok="deleteAll">
      <p>确认删除邮件?</p>
    </Modal>

    <!-- 邮件详情 -->
    <Modal
      v-model="status.showEmail.isShowing"
      title="邮件详情"
      :mask-closable="false"
      :styles="{top: '20px',bottom:'20px',width:'60%'}">
      <AEmailDetail :email-to="tParam.email.emailTo"
                    :create-time="tParam.email.createTime" :virtual-name="tParam.email.virtualName"
                    :subject="tParam.email.subject" :content="tParam.email.content"
                    :attachment="tParam.email.attachment" :id="tParam.email.id" :type="1"
                    :attachment-count="tParam.email.attachmentCount" :attachment-show="tParam.email.attachmentShow"
                     @removeSpam="removeSpam" @addBlacklist="addBlacklist"></AEmailDetail>
      <div slot="footer"></div>
    </Modal>


  </div>
</template>

<!--javascript 代码-->
<script>
import tiyData from "./js/trashEmail/trash_data";
import AEmailDetail from "../email/EmailDetail.vue"
import KeyValueView from "../widgets/KeyValueView";
import {
  emailList,
  deleted,
  webDelete,
  showEmail,
  removeSpam,
  addBlacklist,
  webDeleteAll,
} from "./js/trashEmail/trash_fun";


export default {
  data() {
    return {
      tRole: {
        EMAIL_4_101: "EMAIL-4-101"
      },
      page: tiyData.tPage,
      tParam: tiyData.tParam,
      emailData: tiyData.tData.emailList,
      status: tiyData.tStatus,
      index2: 0,
      check: '',
      isCheckedAllMessage: false,
      messageSelected: [],
      sort:'create_time desc',
    }
  },
  components: {AEmailDetail,KeyValueView},
  methods: {
    search() {
      emailList(this, tiyData);
    },
    change() {
      this.isReload++;
    },
    changePage(page) {
      tiyData.tPage.currentPage = page;
      emailList(this, tiyData);
    },
    sizeChange(page) {
      tiyData.tPage.stepNumber = page;
      emailList(this, tiyData);
    },
    showEmail(index) {
      this.index2 = index;
      showEmail(this, tiyData, index)
    },
    removeSpam() {
      removeSpam(this, tiyData, this.index2);
    },
    addBlacklist() {
      addBlacklist(this, tiyData, this.index2);
    },
    sendSuccess(isSuccess) {
      if (isSuccess) {
        tiyData.tStatus.replayEmail.isShowing = false;
      }
    },
    deleteAction() {
      deleted(this, tiyData);
    },
    deleteItem(index) {
      webDelete(this, tiyData);
    },
    deleteAll() {
      webDeleteAll(this, tiyData);
    },
    checkChange(val) {
      if (this.messageSelected.length == this.emailData.length) {
        this.isCheckedAllMessage = true;
      } else {
        this.isCheckedAllMessage = false;
      }
    },
    handleCheckAll() {
      let self = this;
      if (this.isCheckedAllMessage) {
        this.messageSelected.splice(0, this.messageSelected.length);
        for(let i=0;i<this.emailData.length;i++){
          self.messageSelected.push(this.emailData[i].id);
        }
      } else {
        this.messageSelected.splice(0, this.messageSelected.length);
      }
    },

  }
}
</script>

<!--css样式-->
<style lang="less" scoped>
@import  (once,optional)  "../css/base";

.table_css {
  margin-top: 20px;
  margin-bottom: 20px;
}

.operation_item {
  text-align: left;
  margin-right: 20px;
}

.list_value {
  font-size: 13px;
  color: @tiyTextDescColor;
  padding-right: 1rem;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
